<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVJ 基本概念</title>
</head>
<body>
    <header>
        <h1>SVJ 基本概念</h1>
    </header>
    <main>
        <section>
            <h2>使用SVJ的方式</h2>
            <div>
                <iframe src="https://svgsilh.com/svg_v2/639149.svg" frameborder="0" width="200px"></iframe>
                <img src="https://svgsilh.com/svg_v2/639149.svg" alt="" width="200px">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
                    <rect width="200" height="200" fill="#ccc" />
                </svg>
                <section>
                    <h2>SVJ 重要概念</h2>
                    <h3>形状</h3>
                    <svg width="200" height="200" viewBox="0 0 50 50">
                        <rect x="10" y="5" width="20" height="20" fill="#cd0000"/>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                        <line x1="0" y1="200" x2="200" y2="0"
                        style="stroke:#ccc;stroke-width:1"/>
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
                        <rect x="50" y="50" width="100" height="100" style="fill:#ccc;stroke:black;stroke-width:1;opacity:0.5" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                        <circle cx="100" cy="50" r="40" stroke="black"
                        stroke-width="1" fill="#ccc"/>
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px">
                        <ellipse cx="50" cy="50" rx="30" ry="20" style="fill:rgb(40, 107, 68)"/>
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                        <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
                        style="fill:none;stroke:black;stroke-width:1" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
                        <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
                    </svg>

                    <h3>文本</h3>
                    

                    <p><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                        <text x="10" y="20" style="fill:black;">啊九九九:
                          <tspan x="10" y="45">是谁来自山川湖海，却囿于昼夜、厨房与爱</tspan>
                          <tspan x="10" y="70">思念不过是麦田吹过的风浪</tspan>
                        </text>
                      </svg></p>
                      <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
                        </defs>
                        <text x="10" y="100" style="fill:black;">
                                <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
                        </text>
                    </svg>
                </section>
                
            </div>
        </section>
    </main>
</body>
</html>